<template>
  <div class="dialog">
    <!-- 这里的内容写死就不灵活了，所有用一个占位符，占位 -->
    <!-- 父组件在使用 子组件的时候，给子组件传递结构，传递什么结构，就展示什么结构 -->
    <!-- 这个占位符就就叫做插槽 -->
    <!-- 第1个插槽，用于接收标题 -->
    <slot name="title"><h3>提示</h3></slot>
    <hr />
    <!-- 第2个插槽，用于接收对话框内容 -->
    <slot name="content" uname='zs' age='20'></slot>
    <hr />
    <!-- 第3个插槽，用于接收按钮(没有指定name的插槽， 他的name='default') -->
    <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.dialog {
  margin-bottom: 20px;
  border:solid 3px rgb(82, 204, 192);
  padding: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 2px;
}

</style>